<template>
  <transition name="slide">
	<div class="user-regist">
      <header-common :title="title"></header-common>
      <div class="next" v-if="nexttype" :class="{fadeOutLeftBig:!nexttype}">
          <div class="two phone">
              <input id="phone" type="tel" placeholder="手机号" v-model="phone">
              <input  v-if="!sendMsgDisabled" type="button" class="yzmBtn red" id="send" value="发送验证码" @click='send'>
              <span v-if="sendMsgDisabled" class="yzmBtn red" id="send">{{time+'秒后重新获取'}}</span>
          </div>
          <div class="two yzm">
              <input id="passcode" type="text" placeholder="验证码"  v-model="code">
          </div>
          <div class="error-item"  v-show="via">
              <i class="icon-font icon-error">&#xe69a;</i>
              <span class="err-msg" v-html="Error"></span>
          </div>
          <div id="nextBtn" class="btn" @click='next'>下一步</div>
      </div>
      <div class="submit"  v-else  :class="{fadeInRightBig:nexttype}">
          <div class="greyThree">设置登录密码</div>
          <div class="two">
              <input id="password" type="password" placeholder="请输入6-12位字母和数字的组合"  v-model="password">
              <span></span>
          </div>
          <div class="two">
              <input id="password-confirm" type="password" placeholder="请重新输入6密码"  v-model="passwordConfirm">
              <span></span>
          </div>    
          <div class="error-items"  v-show="vias">
              <i class="icon-font icon-error">&#xe69a;</i>
              <span class="err-msg" v-html="Errors"></span>
          </div>
          <div class="btn" id="submit"  @click='submit'>提交</div>
      </div>      
	</div>
</transition>		
</template>
<script>
import HeaderCommon from 'base/header-common/header-common'
import {sendLogin} from 'api/user-service'
import {formValidatesend,formValidatenext,formValidateSubmit} from 'common/js/formValidate'
import {ERR_OK} from 'api/config'
export default{
    data() {
      return {
        nexttype:true,
        title:'用户注册' ,
        via:false,
        Error:'',
        phone:'',
        code:'',
        password:'',
        passwordConfirm:'',
        Errors:'',
        vias:false,
        sendMsgDisabled:false,
         time: 60, // 发送验证码倒计时          
      }
    },    
    computed:{
    },
    created(){
    },
    methods:{
      send() {
        var formData = {
                phone :this.phone
            },    
            validateResult = formValidatesend(formData);
            // 验证成功
            if(validateResult.status){

                let me = this;
                let timer;
                me.via=false
                me.sendMsgDisabled = true;
                  timer = window.setInterval(function() {
                  if ((me.time--) <= 0) {
                    me.time = 60;
                    me.sendMsgDisabled = false;
                    window.clearInterval(timer);
                  }
                }, 1000);

                     
            }
            // 验证失败
            else{
                // 错误提示
                this.Error=validateResult.msg
                this.via=true
            }            
      },
      next(){
        var formData = {
                phone           : this.phone,
                passcode            : this.code
            },
            validateResult = formValidatenext(formData);
        if(validateResult.status){
           this.via=false 
           this.nexttype=false    
        }
        else{
                this.Error=validateResult.msg
                this.via=true
        }
      },
      submit(){
        var formData = {
                phone           : this.phone,
                password        : this.password,
                passwordConfirm : this.passwordConfirm
            },
            // 表单验证结果
            validateResult =formValidateSubmit(formData);
        // 验证成功
        if(validateResult.status){
           this.vias=false      
          
        }
        else{
                this.Errors=validateResult.msg
                this.vias=true
        }
      }   
    },
    components: {HeaderCommon}
  }	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
.user-regist{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}
  .slide-enter-active,.slide-leave-active{
    transition:all 0.3s;
  }
  .slide-enter,.slide-leave-to{
    transform:translate3d(100%,0,0);
  }

.two{
    width:84%;
    height:36px;
    line-height:36px;
    border:1px solid #dcdcdc;
    border-radius:5px;
}
.phone{
    margin:36px auto 0;
}
.yzm{
    margin:32px auto 0;
}
.two>input{
    padding-left:14px;
    width:55%;
}
#send{
    width: 105px;
    float:right;
    text-align:center;
    height:25px;
    line-height:25px;
    margin-top:7px;
    border-left:1px solid #dcdcdc;
        font-size: 13px;
}
.btn{
    color: #fff;
    text-align: center;
    background-color: #dc3a2d;
    width: 84%;
    margin: 0 auto;
    border-radius:5px;
    height:40px;
    line-height:40px;
    letter-spacing: 2px; 
    margin-top:55px; 
}


/* 提交 */
.submit .greyThree{
    width:83%;
    margin:57px auto 0;
    font-size:$font-size-medium;
}
.submit .two{
    width:84%;
    height:36px;
    line-height:36px;
    border:1px solid #dcdcdc;
    border-radius:5px;
    margin:20px auto 0;
}
.submit .two>input{
    padding-left:14px;
    width:75%;
}
.submit .two>span{
    float:right;
    width:20px;
    height:9px;
    margin:15px 10px;
}
.submit .two>span.open{
    width:22px;
    height:13px;
    margin:13px 10px;
}
.submit .btn{
    color: #fff;
    text-align: center;
    background-color: #dc3a2d;
    width: 84%;
    margin: 0 auto;
    border-radius:5px;
    height:40px;
    line-height:40px;
    letter-spacing: 2px; 
    margin-top:55px; 
}

/* 错误提示 */
.error-item,.error-items{
    width: 84%;
    height: 24px;
    line-height: 24px;
    margin: 16px auto 0;
    color: #ff3c3c;
    font-size: 14px;
}
.icon-error{
    color: #ff3c3c;
    font-size: 14px;
    font-weight: bold;
}
/* 点击下一步 */
.fadeOutLeftBig{
        -webkit-animation:fadeOutLeftBig 1s .2s ease both;
        -moz-animation:fadeOutLeftBig 1s .2s ease both;
        animation:fadeOutLeftBig 1s .2s ease both;
}
@-webkit-keyframes fadeOutLeftBig{
    0%{opacity:1;
        -webkit-transform:translateX(0)}
    100%{opacity:0;
        -webkit-transform:translateX(-2000px)}
    }
@-moz-keyframes fadeOutLeftBig{
    0%{opacity:1;
    -moz-transform:translateX(0)
    }
    100%{opacity:0;
    -moz-transform:translateX(-2000px)
    }
}
@keyframes fadeOutLeftBig{
    0%{opacity:1;
    -moz-transform:translateX(0)
    }
    100%{opacity:0;
    -moz-transform:translateX(-2000px)
    }
}
/* 点击提交 */
.fadeInRightBig{
-webkit-animation:fadeInRightBig 1s .0s ease both;
-moz-animation:fadeInRightBig 1s .0s ease both;
animation:fadeInRightBig 1s .0s ease both;
}
@-webkit-keyframes fadeInRightBig{
0%{opacity:0;
-webkit-transform:translateX(1000px);

}
100%{opacity:1;
-webkit-transform:translateX(0);

}
}
@-moz-keyframes fadeInRightBig{
0%{opacity:0;
-moz-transform:translateX(1000px);

}
100%{opacity:1;
-moz-transform:translateX(0)}

}
@keyframes fadeInRightBig{
0%{opacity:0;
-moz-transform:translateX(1000px);

}
100%{opacity:1;
-moz-transform:translateX(0)}

}




























</style>